<script setup lang="ts">
import vip from '@/assets/vip.webp';
import sc from '@/assets/sc.webp';
import cg from '@/assets/cg.webp';
import { toRefs } from 'vue';
const nei = defineProps(['ce']);
const { ce } = toRefs(nei);
const emits = defineEmits(['fTop']);
const zclick = () => {
    emits('fTop', true);
};
</script>

<template>
    <div class="side">
        <div>
            <img :src="sc" alt="">
        </div>
        <div>
            <img :src="vip" alt="">
        </div>
        <div>
            <img :src="cg" alt="">
        </div>
        <div>
            <IconFont type="icon-bangzhu" style="font-size: 20px;" />
            帮助
        </div>
        <div>
            <IconFont type="icon-kefu" style="font-size: 20px;" />
            客服
        </div>
        <div>
            <IconFont type="icon-xiugaioryijian" style="font-size: 20px;" />
            意见
        </div>
        <div class="top" v-show="ce" @click="zclick">
            <IconFont type="icon-xiangshang2" style="font-size: 20px;" />
            置顶
        </div>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.side {
    width: 35px;
    height: 260px;
    background: #fff;
    position: fixed;
    right: 0;
    bottom: 120px;

    div {
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 12px;
        flex-direction: column;
        width: 100%;
        height: 40px;
        margin-top: 1px;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }

    div:hover {
        background: #f5f5f5;
    }

    .top {
        margin-top: 5px;
        box-shadow: 0 0 5px 5px #efefef;
    }
}
</style>
